<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .title{
            text-align: center;
            height: 1.375rem;
            line-height: 1.375rem;
            font-size: 0.5313rem;
            background-color: #0dc441;
            color: #fff;
        }

        .login-container {
            padding: 0 0.625rem;
            margin-top: 2.5rem;
        }

        .form-group {
            margin-bottom: 0.46875rem;
            position: relative;
        }

        .form-group input {
            width: 100%;
            height: 1.40625rem;
            padding: 0 0.3125rem 0 1.25rem;
            border: 0.015625rem solid #ddd;
            border-radius: 0.15625rem;
            font-size: 0.4375rem;
            color: #333;
        }

        .form-group input::placeholder {
            color: #999;
        }

        .login-btn {
            width: 100%;
            height: 1.40625rem;
            background: #0dc441;
            color: white;
            border: none;
            border-radius: 0.15625rem;
            font-size: 0.5rem;
            margin-top: 1.09375rem;
        }

        .other-options {
            margin-top: 0.625rem;
            text-align: center;
            font-size: 0.375rem;
            color: #999;
        }

        .other-options a {
            color: #0dc441;
            text-decoration: none;
            padding: 0 0.15625rem;
        }

        .other-options span:nth-child(3) {
            color: #ddd;
            margin: 0 0.15625rem;
        }

        .form-group::before {
            content: '';
            position: absolute;
            left: 0.3125rem;
            top: 50%;
            transform: translateY(-50%);
            width: 0.5rem;
            height: 0.5rem;
            background-size: contain;
        }

        .username-group::before {
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>') no-repeat center;
        }

        .password-group::before {
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>') no-repeat center;
        }

        .form-group input:focus {
            outline: none;
            border-color: #0dc441;
        }
    </style>
    <script src="../js/lib-flexible.js"></script>
</head>
<body>
    <div class="title">足球圈 - 登录</div>
    <div class="login-container">
        <form>
            <div class="form-group username-group">
                <input type="text" placeholder="用户名/手机号">
            </div>
            <div class="form-group password-group">
                <input type="password" placeholder="密码">
            </div>
            <button type="submit" class="login-btn">登录</button>
        </form>
        <div class="other-options">
            <span>还没有账号？</span>
            <a href="#">立即注册</a>
            <span>|</span>
            <a href="#">忘记密码？</a>
        </div>
    </div>
</body>
</html>